<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>健身房管理系统 - 后台登录</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://example.com/foundertype/fzshuti.css" rel="stylesheet">
    <style>
        body {
            font-family: "方正舒体", sans-serif;
            background-image: url("https://img.tukuppt.com/bg_grid/00/13/34/TRdgYGk6X2.jpg"); /* 使用四叶草图片作为背景 */
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            display: flex; /* 使用 flex 布局 */
            justify-content: flex-end; /* 内容偏右对齐 */
            align-items: center; /* 垂直居中 */
            height: 100vh;
            margin: 0;
            padding: 0 400px;
        }

        .login-container {
            text-align: center;
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            width: 350px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; /* 使元素分布在容器的顶部和底部 */
        }

        .login-container h2 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .form-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .input-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            margin-bottom: 40px;
        }

        .input-group label {
            margin-right: 10px;
            font-size: 18px;
            width: 60px; /* 调整文字宽度 */
            text-align: right;
        }

        .input-group input {
            flex: 1; /* 占据剩余空间 */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        button {
            background: linear-gradient(to right, #f1ad07 0%, #f3c281 100%);;
            color: white;
            padding: 15px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        button:hover {
            background: linear-gradient(to right, #f8d171 0%, #f6ba7a 100%);
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2>欢迎回来</h2> <!-- 位于顶部 -->
    <div class="form-content">
        <div class="input-group">
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" placeholder="请输入账号" required>
        </div>
        <div class="input-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
    </div>
    <button type="button" onclick="login()">登录</button> <!-- 位于底部 -->
</div>
<script type="text/javascript">
    function login() {
        event.preventDefault();
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var formData = {
            'username': username,
            'password': password
        };
        $.ajax({
            type: "POST",
            url: "./user/login",
            data: JSON.stringify(formData),
            contentType: "application/json",
            success: function (res) {
                if (res.data === null || res.data === undefined) {
                    alert('该账号不存在或者密码错误');
                } else {
                    if (res.data.usertype === "用户") {
                        alert('用户角色没有权限');
                    } else {
                        sessionStorage.setItem('usertype', JSON.stringify(res.data.usertype));
                        sessionStorage.setItem('name', res.data.name);
                        sessionStorage.setItem('username', res.data.username);
                        sessionStorage.setItem('intimate', res.data.intime);
                        console.log(sessionStorage.getItem('intimate'));
                        console.log(JSON.stringify(res.data.name));
                        window.location.href = "./success.jsp";
                    }
                }
            },
            error: function (data) {
                alert('登录失败');
            }
        });
    }
</script>
</body>
</html>